<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img decoding="async" src="https://static.runoob.com/images/svg/img_lightBulb.svg" />
  </div>
  <button v-on:click=" lightOn = !lightOn">O/C</button>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
  <input type="text" v-model="message">
  <p>{{ message }}</p>
  <img v-bind:src="imageSrc" />
  <p v-if="showMessage">Hello Vue!</p>
  <p v-else>Goodbye Vue!</p>
</template>

<style>
#lightDiv {
  position: relative;
  width: 150px;
  height: 150px;
}

#lightDiv > img {
  position: relative;
  width: 100%;
  height: 100%;
}

#lightDiv > div {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: yellow;
}
</style>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
      message: 'Hello Vue!!',
      imageSrc: 'https://static.runoob.com/images/code-icon-script.png',
      showMessage: false,
      items: [
        { id: 1, text: 'Apple' },
        { id: 2, text: 'Banana' },
        { id: 3, text: 'Orange' }
      ],
      lightOn: false
    }
  }
}
</script>
